<template>
    <el-container>
        <el-header class="header">
            <!-- <img class="header-logo" src="../../static/img/logo@2x.png" alt /> -->
            <p class="header-title">车智洗</p>
            <div>
                <span class="b00a f24 mr10">{{ userdata.name }}:{{ roleTable[userdata.role-1].roleName }}</span>
                <span class="ff53 f24" @click="exitLogin"><i title="退出登录状态" class="el-icon-error"></i></span>
            </div>
        </el-header>
        <el-container>
            <el-aside class="side-bar" width="200px">
                <el-col :span="10" class="menu">

                    <el-menu
                        router
                        :default-active="routepath"
                        background-color="#20222A"
                        text-color="#ccc"
                        active-text-color="#fff"
                    >
                        <!--                         v-for="(item,index) in routeList"
                        :key="index"-->
                        <!-- <el-submenu v-if="item.children" :index="item.path">
                            <template slot="title">{{item.name}}</template>
                            <el-menu-item
                                v-for="(item1,index1) in item.children"
                                :key="index1"
                                :index="item1.path"
                            >{{item1.name}}</el-menu-item>
                        </el-submenu>
                        <el-menu-item
                            v-else-if="item.hidden != true"
                            :index="item.path"
                        >{{item.name}}</el-menu-item>-->
                        
                        <template v-for="(item,index) in activerouter" v-if="item.select_state===1">
                            <el-submenu :index="item.link" :key="index" v-if="item.have_child===1">
                                <template slot="title">{{ item.module }}</template>
                                <el-menu-item v-for="(sonactive,sonindex) in item.children" :key="sonindex" :index="sonactive.link" v-if="sonactive.select_state===1">{{ sonactive.module }}</el-menu-item>
                                <!-- <el-menu-item index="/financialSubmeter">财务报表(分)</el-menu-item>
                                <el-menu-item index="/earningsAccount">收益结算</el-menu-item> -->
                            </el-submenu>
                            <el-menu-item v-else :index="item.link" :key="index">{{ item.module }}</el-menu-item>
                        </template>
                        <el-submenu index="/setting">
                            <template slot="title">设置</template>
                            <!-- <el-menu-item index="/personalData">个人资料</el-menu-item> -->
                            <el-menu-item index="/changePassword">密码修改</el-menu-item>
                        </el-submenu>

                        <!-- <el-menu-item index="/home">首页</el-menu-item>
                        <el-submenu index="1">
                            <template slot="title">数据报表</template>
                            <el-menu-item index="/financialSheet">财务报表(总)</el-menu-item>
                            <el-menu-item index="/financialSubmeter">财务报表(分)</el-menu-item>
                            <el-menu-item index="/earningsAccount">收益结算</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">价格调整</template>
                            <el-menu-item index="/price">洗车价格管理</el-menu-item>
                            <el-menu-item index="/topUp">充值价格管理</el-menu-item> -->
<!-- <el-submenu index="/topUp">
                                <template slot="title">充值价格管理</template>
                                <el-menu-item index="/upnext">次卡充值管理</el-menu-item>
                                <el-menu-item index="/upbalance">余额充值管理</el-menu-item>
                            </el-submenu> -->
                            <!-- <el-menu-item index="/overtimePrice">超时价格管理</el-menu-item>
                            <el-menu-item index="/earningsManagement">收益结算管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">一元洗车</template>
                            <el-menu-item index="/oneCarWashSheet">一元洗车(总)</el-menu-item>
                            <el-menu-item index="/oneCarWashSubmeter">一元洗车(分)</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">订单系统</template>
                            <el-menu-item index="/carWash">洗车订单</el-menu-item>
                            <el-menu-item index="/topupOrder">充值订单</el-menu-item>
                            <el-menu-item index="/ovettimeOrder">超时订单</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="/userCenter">用户中心</el-menu-item> -->
                        <!-- <el-menu-item index="/carOperation">车辆信息</el-menu-item> -->
                        <!-- <el-menu-item index="/carMember">车辆会员</el-menu-item> -->
                        <!-- <el-menu-item index="/equipment">设备管理</el-menu-item>
                        <el-submenu index="5">
                            <template slot="title">合作车辆</template>
                            <el-menu-item index="/companyVehicles">运营车辆</el-menu-item>
                            <el-menu-item index="/platformVehicles">运营申请</el-menu-item> -->
                            <!-- <el-menu-item index="/cooperationActive">合作车辆活动</el-menu-item> -->
                        <!-- </el-submenu>
                        <el-submenu index="6">
                            <template slot="title">权限</template>
                            <el-menu-item index="/authority">权限管理</el-menu-item>
                            <el-menu-item index="/staffManagement">人员管理</el-menu-item>
                            <el-menu-item index="/storeBinding">加盟商管理</el-menu-item>
                            <el-menu-item index="/clerkManagement">加盟商员工管理</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="/campaign">广告活动管理</el-menu-item> -->
                        <!-- <el-menu-item index="/member">会员日</el-menu-item> -->
                        <!-- <el-submenu index="7">
                            <template slot="title">会员日</template>
                            <el-menu-item index="/member">会员日日期</el-menu-item>
                            <el-menu-item index="/membercoupon">会员日优惠券</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="/goods">积分商城</el-menu-item>
                        <el-menu-item index="/redeemCode">券码兑换</el-menu-item>
                        <el-menu-item index="/authorityPhone">授权电话</el-menu-item>
                        <el-menu-item index="/city">城市管理</el-menu-item>
                        <el-menu-item index="/spread">推广员工</el-menu-item>
                        <el-menu-item index="/integralRule">积分管理</el-menu-item>
                        <el-menu-item index="/videoManagment">视频管理</el-menu-item>
                        <el-submenu index="/setting">
                            <template slot="title">设置</template> -->
                            <!-- <el-menu-item index="/personalData">个人资料</el-menu-item> -->
                            <!-- <el-menu-item index="/changePassword">密码修改</el-menu-item>
                        </el-submenu> -->
                    </el-menu>
                </el-col>
            </el-aside>
            <el-main class="main">
                <transition name="fade" mode="out-in">
                    <router-view></router-view>
                </transition>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { Base64 } from 'js-base64';
import utils from "../util/request";
export default {
    data() {
        return {
            userdata: {
                name:"管理",
                role:1
            },
            routeList: [],
            activerouter: [],
            routelink: [
                // {id: 1,top_id:null,module_id: 1,name: "首页",level:1},
                // {id: 2,top_id:null,module_id: 2, name: "数据报表",link:"1",level:1},
                // {id: 3,top_id:2,module_id: 3, name: "财务报表（总）",link:"/financialSheet",level:2},
                // {id: 4,top_id:2,module_id: 4, name: "财务报表（分）",link:"/financialSubmeter",level:2},
                // {id: 5,top_id:2,module_id: 5, name: "收益结算",link:"/earningsAccount",level:2},
                // {id: 6,top_:null,module_id: 6, name: "价格调整",link:"2",level:1},
                // {id: 7,top_id:6,module_id: 7, name: "洗车价格管理",link:"/price",level:2},
                // {id: 8,top_id:6,module_id: 8, name: "充值价格管理",link:"/topUp",level:2},
                // {id: 9,top_id:6,module_id: 9, name: "超时价格管理",link:"/overtimePrice",level:2},
                // {id: 10,top_id:6,module_id: 10, name: "收益结算管理",link:"/earningsManagement",level:2},
                // {id: 11,top_id:null,module_id: 11, name: "一元洗车",link:"3",level:1},
                // {id: 12,top_id:11,module_id: 12, name: "一元洗车（总）",link:"/oneCarWashSheet",level:2},
                // {id: 13,top_id:11,module_id: 13, name: "一元洗车（分）",link:"/oneCarWashSubmeter",level:2},
                // {id: 14,top_id:null,module_id: 14, name: "订单系统",link:"4",level:1},
                // {id: 15,top_id:14,module_id: 15, name: "洗车订单",link:"/carWash",level:2},
                // {id: 16,top_id:14,module_id: 16, name: "充值订单",link:"/topupOrder",level:2},
                // {id: 17,top_id:14,module_id: 17, name: "超时订单",link:"/ovettimeOrder",level:2},
                // {id: 18,top_id:null,module_id: 18, name: "用户中心",link:"/userCenter",level:1},
                // {id: 19,top_id:null,module_id: 19, name: "设备管理",link:"/equipment",level:1},
                // {id: 20,top_id:null,module_id: 20, name: "合作车辆",link:"5",level:1},
                // {id: 21,top_id:20,module_id: 21, name: "运营车辆",link:"/companyVehicles",level:2},
                // {id: 22,top_id:20,module_id: 22, name: "运营申请",link:"/platformVehicles",level:2},
                // {id: 23,top_id:null,module_id: 23, name: "权限",link:"6",level:1},
                // {id: 24,top_id:23,module_id: 24, name: "权限管理",link:"/authority",level:2},
                // {id: 25,top_id:23,module_id: 25, name: "人员管理",link:"/staffManagement",level:2},
                // {id: 26,top_id:23,module_id: 26, name: "加盟商管理",link:"/storeBinding",level:2},
                // {id: 27,top_id:23,module_id: 27, name: "加盟商员工管理",link:"/clerkManagement",level:2},
                // {id: 28,top_id:null,module_id: 28, name: "广告活动管理",link:"/campaign",level:1},
                // {id: 29,top_id:null,module_id: 29, name: "会员日管理",link:"7",level:1},
                // {id: 30,top_id:29,module_id: 30, name: "会员日",link:"/member",level:2},
                // {id: 31,top_id:29,module_id: 31, name: "会员日优惠券",link:"/membercoupon",level:2},
                // {id: 32,top_id:null,module_id: 32, name: "积分商城",link:"/goods",level:1},
                // {id: 33,top_id:32,module_id: 33, name: "商品管理",link:"/goodsmanage",level:2},
                // {id: 34,top_id:32,module_id: 34, name: "商品分类",link:"/goodsclassify",level:2},
                // {id: 35,top_id:32,module_id: 35, name: "商品订单",link:"/goodsorder",level:2},
                // {id: 36,top_id:null,module_id: 36, name: "券码兑换",link:"/redeemCode",level:1},
                // {id: 37,top_id:null,module_id: 37, name: "授权电话",link:"/authorityPhone",level:1},
                // {id: 38,top_id:null,module_id: 38, name: "城市管理",link:"/city",level:1},
                // {id: 39,top_id:null,module_id: 39, name: "推广员工",link:"/spread",level:1},
                // {id: 40,top_id:null,module_id: 40, name: "积分管理",link:"/integralRule",level:1},
                // {id: 41,top_id:null,module_id: 41, name: "视频管理",link:"/videoManagment",level:1},


                {id: 1, role: 1, module_id: 0, module: "首页",link:"/home", level: 1, top_id: null, select_state:1},
                {id: 2, role: 1, module_id: 1, module: "数据报表", link:"1",level: 1, top_id: null, select_state: 1,have_child: 1,},
                {id: 3, role: 1, module_id: 2, module: "财务报表（总）",link:"/financialSheet", level: 2, top_id: 2, select_state:1,export_state: 1},
                {id: 4, role: 1, module_id: 3, module: "财务报表（分）",link:"/financialSubmeter", level: 2, top_id: 2, select_state:1},
                {id: 5, role: 1, module_id: 4, module: "收益结算",link:"/earningsAccount", level: 2, top_id: 2, select_state:1},
                {id: 6, role: 1, module_id: 5, module: "价格调整",link:"2", level: 1, top_id: null, select_state:1,have_child: 1,},
                {id: 7, role: 1, module_id: 6, module: "洗车价格管理",link:"/price", level: 2, top_id: 6, select_state: 1,delete_state: 1,add_state:1,update_state: 1},
                {id: 8, role: 1, module_id: 7, module: "充值价格管理",link:"/topUp", level: 2, top_id: 6, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 9, role: 1, module_id: 8, module: "超时价格管理",link:"/overtimePrice", level: 2, top_id: 6, select_state: 1,add_state: 1,update_state: 1},
                {id: 10, role: 1, module_id: 9, module: "收益结算管理",link:"/earningsManagement",level: 2, top_id: 6, select_state: 1,update_state: 1},
                {id: 11, role: 1, module_id: 10, module: "一元洗车",link:"3", level: 1, top_id: null, select_state: 1,have_child: 2},
                {id: 12, role: 1, module_id: 11, module: "一元洗车（总）",link:"/oneCarWashSheet", level: 2, top_id: 11, select_state: 1,update_state: 1},
                {id: 13, role: 1, module_id: 12, module: "一元洗车（分）",link:"/oneCarWashSubmeter", level: 2, top_id: 11, select_state: 1},
                {id: 14, role: 1, module_id: 13, module: "订单系统",link:"4", level: 1, top_id: null, select_state: 1,have_child: 2},
                {id: 15, role: 1, module_id: 14, module: "洗车订单",link:"/carWash", level: 2, top_id: 14, select_state: 1},
                {id: 16, role: 1, module_id: 15, module: "充值订单",link:"/topupOrder", level: 2, top_id: 14, select_state: 1},
                {id: 17, role: 1, module_id: 16, module: "超时订单",link:"/ovettimeOrder", level: 2, top_id: 14, select_state: 1,update_state: 1},
                {id: 18, role: 1, module_id: 17, module: "用户中心",link:"/userCenter", level: 1, top_id: null, select_state: 1},
                {id: 19, role: 1, module_id: 18, module: "设备管理",link:"/equipment", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 20, role: 1, module_id: 19, module: "合作车辆",link:"5", level: 1, top_id: null, select_state: 1,have_child: 2},
                {id: 21, role: 1, module_id: 20, module: "运营车辆",link:"/companyVehicles", level: 2, top_id: 20, select_state: 1,delete_state: 1,update_state: 1},
                {id: 22, role: 1, module_id: 21, module: "运营申请",link:"/platformVehicles", level: 2, top_id: 20, select_state: 1,update_state: 1},
                {id: 23, role: 1, module_id: 22, module: "权限",link:"6", level: 1, top_id: null, select_state: 1,have_child: 1},
                {id: 24, role: 1, module_id: 23, module: "权限管理",link:"/authority", level: 2, top_id: 23, select_state: 1,update_state: 1},
                {id: 25, role: 1, module_id: 24, module: "人员管理",link:"/staffManagement", level: 2, top_id: 23, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 26, role: 1, module_id: 25, module: "加盟商管理",link:"/storeBinding", level: 2, top_id: 23, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 27, role: 1, module_id: 26, module: "加盟商员工管理",link:"/clerkManagement", level: 2, top_id: 23, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 28, role: 1, module_id: 27, module: "广告活动管理",link:"/campaign", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 29, role: 1, module_id: 28, module: "会员日管理",link:"7", level: 1, top_id: null, select_state: 1,have_child: 1},
                {id: 30, role: 1, module_id: 29, module: "会员日",link:"/member", level: 2, top_id: 29, select_state: 1,update_state: 1},
                {id: 31, role: 1, module_id: 30, module: "会员日优惠券",link:"/membercoupon", level: 2, top_id: 29, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 32, role: 1, module_id: 31, module: "积分商城",link:"/goods", level: 1, top_id: null, select_state: 1,have_child: 1},
                {id: 33, role: 1, module_id: 32, module: "商品管理",link:"/goodsmanage", level: 2, top_id: 32, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 34, role: 1, module_id: 33, module: "商品分类",link:"/goodsclassify", level: 2, top_id: 32, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 35, role: 1, module_id: 34, module: "商品订单",link:"/goodsorder", level: 2, top_id: 32, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 36, role: 1, module_id: 35, module: "券码兑换",link:"/redeemCode", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,export_state: 1,update_state: 1},
                {id: 37, role: 1, module_id: 36, module: "授权电话",link:"/authorityPhone", level: 1, top_id: null, select_state: 1,update_state: 1},
                {id: 38, role: 1, module_id: 37, module: "城市管理",link:"/city", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 39, role: 1, module_id: 38, module: "推广员工",link:"/spread", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,export_state: 1,update_state: 1},
                {id: 40, role: 1, module_id: 39, module: "积分管理",link:"/integralRule", level: 1, top_id: null, select_state: 1,delete_state: 1,update_state: 1},
                {id: 41, role: 1, module_id: 40, module: "视频管理",link:"/videoManagment", level: 1, top_id: null, select_state: 1,update_state: 1}
            ],
            roleTable: [
                {   
                    id: 1,
                    roleName: "超级管理员"
                },
                {
                    id: 2,
                    roleName: "经理"
                },
                {
                    id: 3,
                    roleName: "经理助理"
                },
                {
                    id: 4,
                    roleName: "财务"
                },
            ]
        };
    },
    methods: {
        router() {
            this.routeList = this.$router.options.routes[
                this.$router.options.routes.length - 1
            ].children;
            console.log(this.$router);
            console.log(this.$router.options.routes);
            console.log(this.routeList);
        },
        exitLogin(){
            this.$confirm('此操作将推出当前登录的账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                sessionStorage.removeItem("userdata");
                sessionStorage.removeItem("menulist");
                sessionStorage.removeItem("menuarr");
                this.$router.push("/")
                this.$message({
                    type: 'success',
                    message: '退登成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退登'
                });          
            });
        },
        // 导航栏菜单
        requestactive(){
            if(this.activerouter == false){
                let that = this;
                var Base64 = require("js-base64").Base64;
                let userdata = JSON.parse(Base64.decode(sessionStorage.getItem("userdata")))
                utils.request("/authority/list","post",JSON.stringify({page:1,list_rows:9999999,role:userdata.role})).then(resp=>{
                    console.log("列表",resp)
                    let filterarr = resp.data.data.data
                    let data = [];
                    for(var i=0;i<this.routelink.length;i++){
                        filterarr.forEach(item=>{
                            item.module === that.routelink[i].module 
                            ? (
                                item.link = that.routelink[i].link,
                                data.push(item)
                            ) : "";
                        })
                    }
                    // console.log(data)
                    sessionStorage.setItem("menuarr",Base64.encode(JSON.stringify(data)))
                    var result = []
                    function toTree(data) {
                        // 第一步验证带入值是否是数组，不是就走人不执行
                        if (!Array.isArray(data)) {
                            return result
                        }

                        // 先删除需要创建二维数组的关键词，防止数据类型不对后面报错
                        data.forEach(item => {
                            delete item.children;
                        });

                        // 把用id作为键名，保存对应的值，用于后面数装归类
                        let map = {};
                        data.forEach(item => {
                            map[item.id] = item;
                        });
                        // console.log(map)

                        // 最后数据处理,forEach简化班的for循环一次出结果.
                        data.forEach(item => {
                            let parent = map[item.top_id];
                            // console.log(parent)
                            if (parent) {
                                (parent.children || (parent.children = [])).push(item);
                            } else {
                                result.push(item)
                            }
                            // console.log('对的数组',parent,'错的数组',result)
                        });
                        return result;
                    }
                    this.activerouter = toTree(data)
                    console.log(this.activerouter)
                    // sessionStorage.setItem("menulist",Base64.encode(JSON.stringify(this.activerouter)))
                    // console.log(toTree(data))
                    // console.log(this.activerouter === false)
                })

            }
            // console.log(this.activerouter)
        }
    },
    computed: {
        routepath() {
            // console.log(this.$route,this.$route.meta.GuidePath ? this.$route.meta.JumpPath : this.$route.path)
            return this.$route.meta.GuidePath
                ? this.$route.meta.JumpPath
                : this.$route.path;
        }
    },
    created() {
        // sessionStorage.getItem("menulist") !== null 
        // ? (
        //     console.log("123"),
        //     this.activerouter = JSON.parse(Base64.decode(sessionStorage.getItem("menulist")))
        // ) 
        // : console.log("456");
        // this.activerouter = JSON.parse(Base64.decode(sessionStorage.getItem("menulist")))
        // console.log(this.activerouter)
        // console.log(this.activerouter)
        // console.log(this.userdata)
        if(sessionStorage.getItem("userdata") === null){
            this.$router.push("/")
        }else{
            this.userdata = JSON.parse(Base64.decode(sessionStorage.getItem("userdata")))
            this.requestactive()
        }
        // for(var i=0;i<this.routelink.length;i++){
        //     if(this.routelink[i].id !== this.zhuanhuan[i].id){
        //         console.log(i)
        //     }else{console.log("没问题")}
        // }
        // console.log(this.activerouter)
        // console.log(this.$route.meta.GuidePath,this.$route.meta.JumpPath,this.$route.path)
        // this.router();
    }
};
</script>

<style lang="scss" scoped>
.header {
    position: sticky;
    top: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    background-color: #20222a;

    .header-logo {
        width: 180px;
        height: 40px;
        // margin-left: 100px;
        margin-right: 30px;
    }

    .header-title {
        font-size: 35px;
        color: #fff;
        line-height: 35px;
    }
}

.el-container {
    .side-bar {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 1;
        width: 200px !important;
        overflow: auto; //设置溢出可滚动
        &::-webkit-scrollbar {
            display: none;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;

        background: #20222a;

        .menu {
            width: 100%;
            height: 100%;
            text-align: left;
            overflow-y: auto;
            padding-top: 60px;
        }

        .menu::-webkit-scrollbar {
            width: 2px;
            height: 2px;
        }

        .el-menu {
            border: 0;
        }

        .el-menu .el-menu-item.is-active,
        .el-submenu .el-menu-item.is-active {
            background-color: #409eff !important;
        }

        .el-menu .el-submenu__title {
            background-color: #20222a !important;
        }

        .el-menu-item img,
        .el-submenu img {
            margin: 0 24px 0 4px;
        }

        .el-submenu .el-menu {
            background-color: rgb(26, 27, 34) !important;
        }

        .el-submenu .el-menu-item {
            padding-left: 65px !important;
            background-color: rgb(26, 27, 34) !important;
        }

        .el-menu-item-group__title {
            padding: 0;
        }
    }

    .main {
        margin-left: 200px !important;
        background-color: #f2f2f2;
        // overflow-y: auto;
        height: 93.5vh;
    }

    .main::-webkit-scrollbar {
        width: 1px;
        height: 1px;
    }

    // .el-main {
        // padding: 10px 16px;
    // }
}
</style>
